<template>
  <div class="auxiliarys-box" v-if="list.length > 0">
    <div v-for="item in list" :key="item.id" :style="{ borderColor: props.themeColor }">
      <div class="auxiliarys-box-title" :style="{ color: props.titleColor }">{{ item.name }}</div>
      <div class="auxiliarys-box-subtitle" :style="{ color: props.titleColor }" v-if="item.subTitle">
        ——{{ item.subTitle }}
      </div>
      <div class="description-box" v-if="item.description">
        <textMax size="18px" color="#fff" :id="item.id" :data="item.description" :maxLen="242" />
      </div>
      <playImg :cover="item.coverUrl" />
      <div class="video-box" v-if="item.video && item.video.url">
        <playVideo :name="item.video.name" :url="item.video.url" />
      </div>
      <div class="audio-box" v-if="item.audio && item.audio.url">
        <playAudio
          playColor=""
          :name="item.audio.name"
          :url="item.audio.url"
          :nameColor="colorList5[store.styleInfo.colorType - 1].themeColor"
          :iconColor="colorList5[store.styleInfo.colorType - 1].themeColor"
          :timeColor="colorList5[store.styleInfo.colorType - 1].themeColor"
          :background="colorList5[store.styleInfo.colorType - 1].shmentColor"
        />
      </div>
      <div class="exhibits-box" v-if="item.showpieces.length > 0 && item.showpieces.length < 3">
        <div
          class="exhibits-item"
          v-for="(items, indexs) in item.showpieces"
          :key="items.id"
          :class="{ 'item-mg': indexs !== 0 }"
        >
          <img
            :class="'image-bg' + store.styleInfo.colorType"
            :src="$filters.getLinkUrl(items.coverUrl, '?imageView2/2/h/436/w/421/format/webp')"
            class="img-box t-image--fit-contain t-image--position-center"
            @click="pathExhibits(item.id, items.id)"
          />

          <div class="exhibits-item-right">
            <div class="exhibits-item-right-top">
              <div class="right-top-name-parent">
                <span class="exhibits-item-right-top-name">
                  {{ items.name }}
                </span>
              </div>
              <!-- <i class="iconfonts" @click="pathExhibits(item.id, items.id)"> &#xe6af; </i> -->
            </div>
            <t-row :gutter="24">
              <t-col class="exhibit-left">所属年代 </t-col>
              <t-col> {{ items.concreteTimes }}</t-col>
            </t-row>
            <t-row :gutter="24">
              <t-col class="exhibit-left">展品质地 </t-col>
              <t-col> {{ items.texture }}</t-col>
            </t-row>
            <t-row :gutter="24">
              <t-col class="exhibit-left">展品尺寸 </t-col>
              <t-col> {{ items.size }}</t-col>
            </t-row>
            <div class="exhibits-item-right-description">
              <span>{{ items.description ? items.description : '暂无描述' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="exhibits-box3" v-if="item.showpieces.length >= 3">
        <div class="arrowLeft">
          <arrowLeft
            iconSize="60px"
            :color="colorList5[store.styleInfo.colorType - 1].themeColor"
            @click="addCurrent(-1, item)"
            style="margin-right: 24px"
          />
        </div>

        <div style="width: 1110px; overflow: hidden">
          <div
            class="exhibits-item3"
            v-for="(items, indexs) in item.showpieces"
            :key="items.id"
            :class="{
              'exhibits-item0': item.current === indexs + 1,
              'exhibits-item1': item.current === indexs,
              'exhibits-item2': item.current === indexs - 1,
              'exhibits-item4': item.current < indexs - 1,
              'exhibits-item5': item.current > indexs + 1,
            }"
          >
            <div
              v-if="store.styleInfo.colorType == 3"
              class="image-bg3"
              :class="item.current === indexs ? 'exhibits-image' : 'exhibits-image2'"
            >
              <img
                :src="$filters.getLinkUrl(items.coverUrl, '?imageView2/2/format/webp')"
                class="img-box t-image--fit-contain t-image--position-center"
                @click="pathExhibits(item.id, items.id)"
              />
            </div>
            <div
              v-if="store.styleInfo.colorType == 2"
              class="image-bg2"
              :class="item.current === indexs ? 'exhibits-image' : 'exhibits-image2'"
            >
              <img
                :src="$filters.getLinkUrl(items.coverUrl, '?imageView2/2/format/webp')"
                class="img-box t-image--fit-contain t-image--position-center"
                @click="pathExhibits(item.id, items.id)"
              />
            </div>
            <div
              v-if="store.styleInfo.colorType == 1"
              class="image-bg1"
              :class="item.current === indexs ? 'exhibits-image' : 'exhibits-image2'"
            >
              <img
                :src="$filters.getLinkUrl(items.coverUrl, '?imageView2/2/format/webp')"
                class="img-box t-image--fit-contain t-image--position-center"
                @click="pathExhibits(item.id, items.id)"
              />
            </div>
            <div class="exhibits-image-name">
              {{ items.name }}
            </div>
          </div>
        </div>
        <div class="arrowRight">
          <arrowRight
            iconSize="60px"
            :color="colorList5[store.styleInfo.colorType - 1].themeColor"
            @click="addCurrent(1, item)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { useRouter, useRoute } from 'vue-router';
import { auxiliarysList } from '@/api/templates/templates';
import { useProjectStore } from '@/store';
import { ref, watch, nextTick } from 'vue';
import textMax from './textMaxLevel3.vue';
import playAudio from '@/components/templatePlay/auxiliarysAudio.vue';
import playVideo from '@/components/templatePlay/video.vue';
import playImg from '@/components/templatePlay/image.vue';
import { urls } from '@/utils/request/upload';
import { colorList5 } from '../../../../data';
import arrowLeft from '../../../components/arrowLeft.vue';
import arrowRight from '../../../components/arrowRight.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { BrowseIcon } from 'tdesign-icons-vue-next';

const emit = defineEmits(['emitExhibits']);
const props = defineProps({
  moduleId: {
    type: Number,
  },
  titleColor: {
    type: String,
    default: '#333333',
  },
  maxLen: {
    type: Number,
    default: 80,
  },
  imgBackground: {
    type: String,
    default: '#F0F3F6',
  },
  exhibitBackground: {
    type: String,
    default: '#F0F3F6',
  },
  subtitleColor: {
    type: String,
    default: 'rgba(51, 51, 51, 1)',
  },
  themeColor: {
    type: String,
    default: 'rgba(51, 51, 51, 1)',
  },
});
const list = ref([]);
const store = useProjectStore();
const router = useRouter();
const route = useRoute();

const pathExhibits = (moduleId: number, showpieceid: number) => {
  emit('emitExhibits', moduleId, showpieceid);
};
const init = async () => {
  try {
    let res = await auxiliarysList(localStorage.getItem('projectId'), props.moduleId, {
      c: route.meta.loopType ? 1 : 0,
    });
    list.value = res.data;
    // list.value.forEach((item) => {
    //   item.showpieces.forEach((element) => {
    //     element.current = 0;
    //   });
    // });
    list.value.forEach((item) => {
      item.current = 1;
    });
    nextTick(() => {
      // var dom = document.getElementById('unit-box-scroll');
      // dom.scrollIntoView();
      const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
      const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
      window.scrollTo({
        top: top,
      });
    });
  } catch (err) {}
};
const addCurrent = (num: number, item: any) => {
  if (item.current === 0 && num < 0) {
    MessagePlugin.warning('暂无上一个展品');
    return;
  }

  // // console.log(item.current, item.showpieces.length);
  if (item.current === item.showpieces.length - 1 && num > 0) {
    MessagePlugin.warning('暂无下一个展品');
    return;
  }
  console.log(item);
  item.current += num;

  // item.currentWidth += -296 * num;
  // console.log(item.current);
  // var imgItemImage = document.getElementById(`exhibits${item.id}`);

  // imgItemImage.style.transform = `translateX(${item.currentWidth}px)`;
};
init();
watch(
  () => props.moduleId,
  () => {
    init();
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.auxiliarys-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 50px;
  margin-bottom: 80px;
  background: url('https://static.jiyi.show/template/template5/auxiliarysBG.png') center / 717px 476px;
  // div {
  //   width: 1180px;
  //   margin: 0 auto;
  //   border-top: 1px solid;
  //   border-bottom: 1px solid;
  //   padding-top: 40px;
  //   padding-bottom: 40px;
  // }
}

:deep(.bbb) {
  font-size: 18px !important;
}
.description-box {
  margin-bottom: 26px;
  margin-left: 50px;
  // height: 446px;
  padding-top: 40px !important;
  color: #fff;
}
.content-text-heard {
  :deep(span) {
    font-size: 18px !important;
  }
}
.video-box {
  width: 700px;
  margin: auto;
  margin-top: 40px;
  :deep(.d-player-wrap) {
    height: 399px;
  }
}
.audio-box {
  width: 1180px;
  margin: auto;
  margin-top: 40px;
}
:deep(.t-slider__rail) {
  height: 2px;
}
:deep(.t-slider__button) {
  width: 10px;
  height: 10px;
  background: rgba(38, 41, 51, 1);
  border: none;
}
:deep(.t-slider__button:hover) {
  width: 12px;
  height: 12px;
  background: rgba(38, 41, 51, 1);
  border: none;
}
:deep(.t-slider__track) {
  height: 2px;
  background: rgba(38, 41, 51, 1);
}
.exhibits-box {
  display: flex;
  flex-direction: column;
  width: 1000px;
  padding-bottom: 50px;
  margin-top: 40px;
}
.exhibits-item {
  display: flex;
  width: 100%;
  height: 421px;
  margin-top: 12px;
  .img-box {
    display: block;
    width: 436px;
    height: 421px;
    cursor: pointer;
  }
}
.exhibits-item-right {
  display: flex;
  flex-direction: column;
  width: 664px;
  padding-left: 68px;
  height: 100%;
  flex: 1;
}
.exhibits-item-right-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  // margin-bottom: 24px;
}
.right-top-name-parent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exhibits-item-right-top-name {
  font-family: SourceHanSerifCN;
  width: 100%;
  font-size: 28px;
  line-height: 34px;
  color: #333;
}
.iconfonts {
  cursor: pointer;
  font-size: 24px;
  color: #333;
}
.exhibits-item-right-description {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* 这里是超出几行省略 */
  overflow: hidden;
  margin-top: 40px;
  span {
    font-family: SourceHanSerifCN;
    font-size: 16px;
    line-height: 30px;
    color: #333;
  }
}
.item-mg {
  margin-top: 60px;
}
:deep(.d-slider .d-slider__runway .d-slider__preload) {
  background: rgba(255, 255, 255, 0.81);
}

.t-row {
  margin-top: 40px;
  margin-bottom: 0;
  color: #333;
  font-family: SourceHanSerifCN;
  font-size: 16px;
  font-style: normal;
  line-height: 24px; /* 150% */
}
.exhibit-left {
  color: #333;
  text-align: center;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  opacity: 0.4;
  line-height: 22px; /* 157.143% */
}

.center-exhibit {
  width: 860px;

  margin: auto;
  margin-bottom: 50px;
  overflow: hidden;
  > div {
    display: flex;
  }
}

.icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-top: 114px;
  cursor: pointer;
  :deep(.iconfonts) {
    color: #fff !important;
    font-size: 20px !important;
  }
}
.auxiliarys-box-else {
  flex: 1;
}
.auxiliarys-box-title {
  width: 1180px;
  color: #fff;
  font-family: SourceHanSerifCN;
  font-size: 17px;
  line-height: 32px; /* 188.235% */
  text-align: center;
}
.auxiliarys-box-subtitle {
  width: 1180px;
  color: #e9d5b0;
  text-align: center;
  font-family: SourceHanSerifCN;
  font-size: 18px;
  line-height: 32px; /* 177.778% */
  margin-top: 10px !important;
}
.image {
  margin-top: 0px;
}
.image-bg3 {
  margin: 0 20px;
  background: url(https://static.jiyi.show/template/template5/auxiliarysExhibitBG1.png) center / 100% 100% no-repeat;
}
.image-bg2 {
  margin: 0 20px;
  background: url(https://static.jiyi.show/template/template5/auxiliarysExhibitBG2.png) center / 100% 100% no-repeat;
}
.image-bg1 {
  margin: 0 20px;
  background: url(https://static.jiyi.show/template/template5/auxiliarysExhibitBG3.png) center / 100% 100% no-repeat;
}
.exhibits-box3 {
  display: flex;
  margin-top: 56px;
  position: relative;
  width: 1293px;
  height: 450px;
  overflow: hidden;
  .exhibits-item0 {
    position: absolute;
    left: 90px;
  }
  .exhibits-item1 {
    position: absolute;
    left: 440px;
    width: 411px;
  }
  .exhibits-item2 {
    position: absolute;
    left: 887px;
  }
  .exhibits-item4 {
    position: absolute;
    left: 1380px;
    opacity: 0;
  }
  .exhibits-item5 {
    position: absolute;
    left: -500px;
    opacity: 0;
  }
  // :deep(.icon-boxs) {
  //   margin-top: 168px;
  // }
  img {
    // width: 411px;
    // height: 396px;
    border-radius: 0;
  }
}
.exhibits-item3 {
  // width: 100%;
  position: relative;
  width: 312px;
  height: 312px;
  transition: all 0.3s;
}
.exhibits-image {
  width: 411px;
  height: 396px;
  text-align: center;
  transition: all 0.3s;
  img {
    width: 100%;
    height: 100%;
  }
}
.exhibits-image-name {
  color: #fff;
  text-align: center;
  font-family: SourceHanSerifCN;
  font-size: 18px;
  font-style: normal;
  line-height: 28px; /* 155.556% */
  text-align: center;
  margin-top: 16px;
  width: 100%;
  margin-left: 20px;
}
.exhibits-image2 {
  width: 312px;
  height: 312px;
  margin-top: 47px;

  img {
    width: 100%;
    height: 100%;
  }
}
.arrowRight {
  position: absolute;
  right: 0px;
  top: 192px;
}
.arrowLeft {
  position: absolute;
  left: 0px;
  top: 192px;
}
.tdesign-demo-image-viewer__ui-image {
  img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }
}
</style>
